<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
    </div>
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :scroll="{ x: true }"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="false"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)" style="margin-left: 8px">{{$t('商品列表')}}</a>
        </span>
      </a-table>
    </div>
    <exchange-goods-modal ref="goodsModal"></exchange-goods-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { initDictOptions, filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { getAction, putAction } from '../../api/manage'
import ExchangeGoodsModal from './modules/ExchangeGoodsModal'

export default {
  name: 'ExchangeZone',
  components: {
    ExchangeGoodsModal,
  },
  data() {
    return {
      description: '兑换专区管理页面',
      // 表头
      columns: [
        {
          title: this.$t('专区名称'),
          align: 'center',
          dataIndex: 'text',
        },
        {
          title: this.$t('操作'),
          dataIndex: 'action',
          align: 'center',
          width: '100',
          scopedSlots: { customRender: 'action' },
        },
      ],
      dataSource:[]
    }
  },
  created() {
    this.initDictConfig()
  },
  methods: {
    initDictConfig() {
      initDictOptions('bis_goods_zone.zone').then((res) => {
        if (res.success) {
          this.dataSource = res.result
        }
      })
    },
    handleEdit(record) {
      this.$refs.goodsModal.show(record)
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>